{extend name="../app/index/view/layout/main.html" /}
//网站标题
{block name="title"}<title>IP所在地查询 - {$meta.appname}</title>{/block}

//css资源
{block name="link"}
<!-- 第三方库css -->
<link rel="stylesheet" href="__STATIC__/lib/layui/css/layui.css">
<link rel="stylesheet" href="__STATIC__/lib/swiper/css/swiper.css">

<!-- 自定义css -->
<link rel="stylesheet" href="__INDEX_STATIC__/css/common.css">
<link rel="stylesheet" href="__INDEX_STATIC__/css/app.css">
{/block}

//js资源
{block name="script"}
<script src="__STATIC__/lib/layui/layui.js"></script>
<script src="__INDEX_STATIC__/js/config.js"></script>
<script>
    'use strict';
    layui.use(['layer', 'jquery', 'nav','form','code'], function(){
        let layer = layui.layer
            ,form = layui.form
            ,$ = layui.jquery;
        layui.code();

        //监听提交
        form.on('submit(formSearchIp)', function(data){
            $.ajax({
                url : "{:url('ipLocation')}",
                data: data.field,
                type: 'GET',
                success: function(d){
                  if (d.code === 0){
                      console.log(d);
                      $('#ip').text(d.data.ip);
                      $('#country').text(d.data.country);
                      $('#province').text(d.data.province);
                      $('#city').text(d.data.city);
                      $('#isp').text(d.data.isp);
                      $('#area').text(d.data.area);
                  }else{
                      layer.msg(d.msg);
                      console.log(d.msg);
                  }
                }
            });

            return false;
        });


    });
</script>
{/block}

//body
{block name="body"}
<!-- body -->
<section class="body top-25">
  <div class="layui-container">
    <div class=" block">
      <div class="block-header flex-def flex-zBetween">
        <h2>
          <i class="layui-icon layui-icon-util best-icon"></i>
          IP所在地查询
        </h2>
      </div>

      <!-- tags -->
      <div class="top-25 flex-def flex-zCenter flex-cCenter">
        <div style="width: 65%;">
          <!-- 表单 -->
          <form class="layui-form layui-form-pane" action="">
            <div class="layui-form-item">
              <label class="layui-form-label">输入IP</label>
              <div class="layui-input-block">
                <input value="{$ipLocation.ip}" type="text" name="ip" required  lay-verify="required" placeholder="输入IP" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formSearchIp">立即查询</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
              </div>
            </div>
          </form>
          <!-- 信息 -->
          <table class="layui-table">
            <colgroup>
              <col width="200">
              <col>
            </colgroup>
            <thead>
            </thead>
            <tbody>
            <tr>
              <td>IP</td>
              <td id="ip">{$ipLocation.ip}</td>
            </tr>
            <tr>
              <td>国家</td>
              <td id="country">{$ipLocation.country}</td>
            </tr>
            <tr>
              <td>省会</td>
              <td id="province">{$ipLocation.province}</td>
            </tr>
            <tr>
              <td>城市</td>
              <td id="city">{$ipLocation.city}</td>
            </tr>
            <tr>
              <td>网络运营商</td>
              <td id="isp">{$ipLocation.isp}</td>
            </tr>
            <tr>
              <td>区域</td>
              <td id="area">{$ipLocation.area}</td>
            </tr>

            </tbody>
          </table>
          <br />

          <!-- 接口使用 -->
          <div class="layui-card">
            <div class="layui-card-header"><span style="font-size: 22px;">IP查询接口使用</span></div>
            <div class="layui-card-body">
              此工具基于纯真 IP 库，并且把非结构化的数据结构化。<br />
              一旦识别了 IP，都可以显示国家。国内 ip 都能识别出省，基本可以识别出市、运营商，有部分能识别出县，以及公司小区学校网吧等信息。<br />
              此接口进行了访问频率限制。
            </div>
          </div>
          <!-- 接口说明 -->
          <table class="layui-table">
            <colgroup>
              <col width="150">
              <col width="200">
              <col>
            </colgroup>
            <thead>
            <tr>
              <th>请求</th>
              <th>说明</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>json请求</td>
              <td>get</td>
            </tr>
            <tr>
              <td>json请求</td>
              <td>{:url('ipLocation',['ip'=>'IP'])->domain(true)}</td>
            </tr>
            <tr>
              <td>jsonp请求</td>
              <td>get</td>
            </tr>
            <tr>
              <td>jsonp请求</td>
              <td>{:url('ipLocation',['ip'=>'IP','callback'=>'CALLBACK'])->domain(true)}</td>
            </tr>
            </tbody>
          </table>

          <table class="layui-table">
            <colgroup>
              <col width="150">
              <col width="200">
              <col>
            </colgroup>
            <thead>
            <tr>
              <th>参数</th>
              <th>说明</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>ip</td>
              <td>需要查询的IP地址</td>
            </tr>
            <tr>
              <td>callback</td>
              <td>javascript回调函数</td>
            </tr>
            </tbody>
          </table>

<pre class="layui-code">
  //成功返回
  {
    "code" : 0,
    "data" : {
      "area" : "中国广东深圳市联通"
      "city" : "深圳市"
      "country" : "中国"
      "county" : ""
      "ip" : "163.177.65.160"
      "isp" : "联通"
      "province" : "广东"
    }
  }
  //失败
  {
    "code": 1,
    "msg" : "ip invalid"
  }
</pre>
        </div>
      </div>
    </div>
  </div>
</section>
{/block}